<script setup>
  import cookie from 'js-cookie'
  import { ref, reactive } from 'vue'
  import { NButton, NInput, NForm, NFormItem, NCheckbox } from 'naive-ui'
  import router from '@/router/index'
  import { useUserStore } from '@/store/user'

  // 用户状态管理
  let userStore = useUserStore()

  // 登录
  let formRef = ref(null)
  let form = reactive({
    username: 'admin',
    password: 'admin123',
    uuid: ''
  })
  let rules = {
    username: {
      required: true,
      trigger: ['input', 'blur'],
      message: '请输入用户名'
    },
    password: {
      required: true,
      trigger: ['input', 'blur'],
      message: '请输入密码'
    }
  }
  let rememberMe = ref(false)
  let loginBtnState = ref(false)
  let handleLogin = () => {
    loginBtnState.value = true
    formRef.value?.validate((errors) => {
      if (!errors) {
        if (rememberMe.value) {
          cookie.set('username', form.username, { expires: 30 })
          cookie.set('password', form.password, { expires: 30 })
          cookie.set('rememberMe', rememberMe.value, { expires: 30 })
        } else {
          cookie.remove('username')
          cookie.remove('password')
          cookie.remove('rememberMe')
        }
        userStore
          .login(form)
          .then(() => {
            window.$msg.success('登录成功')
            router.push('/home')
          })
          .catch(() => {
            loginBtnState.value = false
          })
      } else {
        loginBtnState.value = false
      }
    })
  }

  // 获取默认登录账号
  function getCookie() {
    form.username = cookie.get('username') || ''
    form.password = cookie.get('password') || ''
    rememberMe.value = Boolean(cookie.get('rememberMe')) || false
  }
  getCookie() // 需要记住密码，自己取消注释
</script>

<template>
  <div class="login-bg c-center">
    <div class="login__box">
      <div class="login__title">登 录</div>
      <n-form ref="formRef" class="login-form__box" :model="form" :rules="rules" label-placement="left">
        <n-form-item path="username">
          <n-input class="login-input" v-model:value="form.username" placeholder="请输入用户名/手机号" @keyup.enter="handleLogin">
            <template #prefix>
              <svg-icon name="username" color="grey"></svg-icon>
            </template>
          </n-input>
        </n-form-item>
        <n-form-item path="password">
          <n-input
            class="login-input"
            v-model:value="form.password"
            placeholder="请输入密码"
            type="password"
            show-password-on="mousedown"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <svg-icon name="password" color="grey"></svg-icon>
            </template>
          </n-input>
        </n-form-item>
        <div class="login-checkbox_box">
          <n-checkbox class="login-checkbox" v-model:checked="rememberMe"></n-checkbox>
          <span>记住密码</span>
        </div>
        <n-button class="login-btn_login" type="info" @click="handleLogin" :loading="loginBtnState" :disabled="loginBtnState">登录</n-button>
      </n-form>
      <div class="login-btn_forget" @click="handleForget">忘记密码 ？</div>
    </div>
  </div>
</template>

<style lang="less">
  .n-form-item {
    margin-top: -10px;
  }
</style>

<style lang="less" scoped>
  .login-bg {
    width: 100vw;
    height: 100vh;
    background-image: url('@/assets/login_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    .login__box {
      width: 440px;
      padding: 30px 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .login__title {
        font-size: 24px;
        text-align: center;
        color: #1d69a3;
        margin-bottom: 20px;
      }
    }
  }

  .login-input {
    margin-top: 20px;
  }
  .login-checkbox_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 20px 10px;
    color: #71a1c5;
    font-size: 12px;
  }
  .login-checkbox {
    margin-right: 5px;
  }
  .login-btn_login {
    height: 45px;
    width: 100%;
  }
  .login-btn_forget {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #71a1c5;
    cursor: pointer;
  }
</style>
